<!--
 * @Author: coman
 * @LastEditors: coman
 * @Date: 2020-06-19 11:39:35
 * @motto: No pain,No gain
 * @LastEditTime: 2020-06-19 14:46:50
--> 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        #outer/*外部*/
        {

          margin:100px auto;
          border:solid black 1px;
          background-color:white;
          width:1004px;
          height:54px;
        }
        #inner/*内部*/
        {
          background-color:orange;
          width:0px;/*首先将内部的宽度定为0，用show（）来实现进度条！*/
          height:50px;
          margin-left:2px;
          margin-top:2px;
          position: relative;
    
        }
        #process{
            position: absolute;
            left: 0;right: 0;
            top: 0;bottom: 0;
            margin: auto;
            width: 30px;
            height: 25px;
        }
        </style>
    </style>
</head>
<body>
    <div id="outer">
        <div id="inner">
            <div id="process"></div>
        </div>
        </div>
    <script>
        
      /*   setInterval(function(){
            bar.style.width=randomWidth();
        },1000)

        function randomWidth(){

        } */
        function show()
            {
            if(document.getElementById("inner").offsetWidth<1000)//offsetWidth实现的时候width是没有宽度的，而style.width实现的时候则有宽度（px）！
              {
                document.getElementById("inner").style.width=
                document.getElementById("inner").offsetWidth+20+"px";//每次执行show()函数的时候宽度都会加上20！
                document.getElementById("process").innerHTML=document.getElementById("inner").offsetWidth/10+"%"
                console.log(document.getElementById("inner").style.width);//console 控制台 ：可以在网页上看到width的变化(利用F12)
                }
            else
            {
                document.getElementById("inner").style.width=1000+"px";//如果大于1000px的话，只能将1000px赋值给border-width;!
                stop();//此时就应该执行停止定时器的函数！
            }
}
var timer;//定义在两个函数外面，因为两个函数都会用到！
function start()
{
 timer = window.setInterval(show,200);//每隔200ms调用一次show函数
}
function stop()
{
  timer = window.clearInterval(setInterval());
}
start();
    </script>
</body>
</html>